<template>
  <div class="hamburger-transition" style="padding: 0 15px" @click="toggleClick">
    <svg v-if="isActive" class="hamburger" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
    </svg>
    <svg v-else class="hamburger" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
    </svg>
  </div>
</template>

<script>
export default {
  name: "Hamburger",
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggleClick() {
      this.$emit("toggle");
    },
  },
};
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.hamburger.hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.hamburger-transition {
  transition: width 0.3s;
}
</style>
